// ------ public ------

// 颜色
$ui-color-red:#F36C60;
$ui-color-blue: #26a2ff;
$ui-color-black: rgba(black , .7);
$ui-color-disabled: rgba($color:black, $alpha:.24);
$ui-color-orange: #ff6c00;

// 背景
$ui-bg-color:rgb(243, 245, 247);

// 边框
$ui-border: 1px solid rgba(black,.07);
$ui-border-radius: 4px;

// 单位转换
@function rem($px) {
    @return $px / 20px * 1rem;
}

// 文本溢出样式，clamp到多少行溢出时显示缩略字符
@mixin text-clamp($clamp:1) {
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $clamp;
    overflow: hidden;
}

// 图片盒名称渐变背景
@mixin name-background() {
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.87) 100%);
}

@mixin box-shadow-bottom {
    box-shadow: 0 1px 1px rgba($color: black, $alpha: .1);
}

@mixin box-shadow($hover:false) {
    $shadow:0 .0625rem .375rem rgba(0, 0, 0, .117647), 0 .0625rem .25rem rgba(0, 0, 0, .117647);
    @if($hover) {
        &:hover {
            box-shadow: $shadow;
            transition: .3s all linear;
        }
    }@else{
        box-shadow: $shadow;
    }
}

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin img-circle($size, $autoType:"") {
    height: $size;
    width: $size;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
    >img{
        @if $autoType == 'width' {
            width: $size;
        }
        @if $autoType == 'height'{
            height: $size;
        }
        @if $autoType == ''{
            width: $size;
            height: $size;
        }
    }
}

@mixin color-gradient($beginColor:#ff7005,$endColor:#ff8932,$color:white,$direction:right){
    background: -ms-linear-gradient($direction, $beginColor 0%,$endColor 100%);// ie
    background: -o-linear-gradient($direction, $beginColor, $endColor);
    background: -moz-linear-gradient($direction, $beginColor, $endColor);
    background: -webkit-linear-gradient($direction, $beginColor, $endColor);
    @if $direction==right {
        background: linear-gradient(to left, $beginColor, $endColor);
    }@else{
        background: linear-gradient(to right, $beginColor, $endColor);
    }
    color: $color;
}

@mixin hover-shadow{
    transition: .3s;
    &:hover{
        box-shadow: 0 .0625rem .375rem rgba(0, 0, 0, .117647), 0 .0625rem .25rem rgba(0, 0, 0, .117647);
    }
}